<template>
    <div class="itemTitle" @click="openAndClose">
        <label>{{title}}</label>
        <i v-if="openState" class="iconfont icon-jiantou-copy-copy-copy"></i>
        <i v-else class="iconfont icon-jiantou-copy-copy"></i>
    </div>
</template>

<script>
import { reactive,toRefs,getCurrentInstance } from 'vue'
import {useRoute,useRouter} from 'vue-router'
import { useStore } from 'vuex'
export default {
    props:{
        title:String,
        open:{
            type:Boolean,
            default:false
        }
    },
    components:{
        
    },
    setup(props,context){
        const router = useRouter()
        const route = useRoute()
        const store = useStore()
        const {proxy} = getCurrentInstance()

        const state = reactive({
            openState:props.open
        })

        const openAndClose = ()=>{
            state.openState = !state.openState
            context.emit('change',state.openState)
        }

        return{
            ...toRefs(state),
            openAndClose
        }
    }
}
</script>

<style lang="scss" scoped>
    .itemTitle{
        display: flex;
        width: 100%;
        height: 84px;
        line-height: 80px;
        border: 1px solid #0E6161;
        font-size: 26px;
        font-weight: 500;
        padding: 0 20px;
        label{
            flex: 1;
        }
        i{
            color: #809191;
            font-weight: bold;
        }
    }
</style>